<!--
 * @Author: 杨光辉(GerhardYang)
 * @Date: 2021-06-02 17:24:24
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-08-24 09:22:50
 * @Description: file content
 * @Copyright: 超图软件华中平台客户中心 (SuperMap Software Co., Ltd. -Central China Platform)
-->
<template>
  <div class="spatial_query">
    <!-- 空间查询工具栏 -->
    <a-row>
      <a-col :span="3">
        <a-button type="link" @click="search('CircleMarker')" title="点选查询">
          <icon-font type="icon-pointer" />
        </a-button>
      </a-col>
      <a-col :span="3">
        <a-button type="link" @click="search('Polyline')" title="沿线查询">
          <icon-font type="icon-icon-line-graph" />
        </a-button>
      </a-col>
      <a-col :span="3">
        <a-button type="link" @click="search('Polygon')" title="多边形查询">
          <icon-font type="icon-draw-polygon-solid" />
        </a-button>
      </a-col>
      <a-col :span="3">
        <a-button type="link" @click="search('Rectangle')" title="矩形查询">
          <icon-font type="icon-mianji" />
        </a-button>
      </a-col>
      <a-col :span="3">
        <a-button type="link" @click="search('Circle')" title="画圆查询">
          <icon-font type="icon-yuan" />
        </a-button>
      </a-col>
      <a-col :span="3">
        <a-button type="link" @click="clear('click')" title="清除">
          <icon-font type="icon-shanchu11" />
        </a-button>
      </a-col>
    </a-row>
    <a-modal
      v-model="lineVisible"
      title="请选择或输入缓冲距离(单位:米)"
      @ok="handleOk"
    >
      <a-button-group size="small">
        <a-button type="link" @click="value = 200"> 200m </a-button>
        <a-button type="link" @click="value = 500"> 500m </a-button>
        <a-button type="link" @click="value = 1000"> 1km </a-button>
        <a-button type="link" @click="value = 5000"> 5km </a-button>
      </a-button-group>
      <a-input-number id="inputNumber" v-model="value" :min="10" :max="10000" />
    </a-modal>
  </div>
</template>

<script>
import { Icon } from "ant-design-vue";
// 自定义图标
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "./iconfont/iconfont.js",
});

export default {
  data() {
    return {
      lineVisible: false,
      value: 200,
    };
  },
  mounted() {
    let self = this;
    this.$eventBus.$on("queryType", function (data) {
      if (data == "click") {
        self.clear(data);
      } else {
        self.search(data);
      }
    });
  },
  props: ["checkedKeys"],
  computed: {
    map() {
      return this.$store.state.map;
    },
    SearchLayersNodes() {
      return this.$store.state.config.SearchLayersNodes;
    },
    //图层树专题图全局图层组
    treeThemeMapLayerGroup() {
      return this.$store.state.treeThemeMapLayerGroup;
    },
    //图层树空间查询结果要素组
    querydrawFeatureGroup() {
      return this.$store.state.querydrawFeatureGroup;
    },
    treeQueryFeatureGroup() {
      return this.$store.state.treeQueryFeatureGroup;
    },

    drawer() {
      return this.$store.state.drawer;
    },
  },
  components: {
    IconFont,
  },
  methods: {
    //查询
    search(type) {
      this.clear();
      if (this.checkedKeys.length == 0) {
        this.$message.destroy();
        this.$message.warning("请选择图层后再进行查询");
      } else {
        if (type == "CircleMarker") {
          console.log("开始点选查询");
          this.drawer.CircleMarkerDrawer.enable();
        } else if (type == "Rectangle") {
          console.log("开始矩形查询");
          this.drawer.RectangleDrawer.enable();
        } else if (type == "Polygon") {
          console.log("开始多边形查询");
          this.drawer.PolygonDrawer.enable();
        } else if (type == "Circle") {
          console.log("开始画圆查询");
          this.drawer.CircleDrawer.enable();
        } else if (type == "Polyline") {
          console.log("开始沿线查询");
          this.lineVisible = true;
          this.drawer.PolylineDrawer.enable();
        }
        console.log("查询前所有选中图层：", this.checkedKeys);
        this.$parent.query();
      }
    },
    //开始绘制
    drawerCreated() {
      return new Promise((resolve) => {
        this.map.once("draw:created", (event) => {
          resolve(event);
        });
      });
    },
    //清除图层
    clear(type) {
      this.querydrawFeatureGroup.clearLayers();
      this.treeQueryFeatureGroup.clearLayers();
      this.drawer.CircleMarkerDrawer.disable();
      this.drawer.RectangleDrawer.disable();
      this.drawer.PolygonDrawer.disable();
      this.drawer.CircleDrawer.disable();
      // 点击清除按钮则关闭结果面板
      if (type == "click") {
        this.$parent.$refs.TreeSearchResult.visible = false;
        this.$parent.$refs.TreeSearchResult.onClose();
      }
    },
    handleOk() {
      this.lineVisible = false;
      console.log(`缓冲距离:${this.value}`);
    },
  },
};
</script>

<style lang="less" scoped>
.spatial_query {
  height: 40px;
  width: 100%;
  bottom: 0;
  text-align: center;
  margin-left: -10px;
  padding: 0;

  .tools-title {
    line-height: 40px !important;
    font-size: 14px !important;
  }
  i {
    line-height: 40px !important;
    font-size: 20px !important;
  }
}
</style>
